import React from 'react'
import { Link } from 'react-router-dom'
import { JumboTabs } from 'antd-mobile'
import { $pre } from '../../../../http/http';
import './IndexGoods.less'
import { filterPrice } from '../../../../filters';
export default function IndexGoods(props) {
  let { indexgoods, n, changeN } = props;
  let navs = ['热门商品', '猜你喜欢', '全部商品','粮油调味']
  return (
    <div className='goods'>
      <JumboTabs onChange={(key) => {
        changeN(key)
      }}>
        {
          navs.map((item, index) => {
            return (
              <JumboTabs.Tab key={index}
                title={item}>
                {indexgoods.length > 0 ?
                  <div>{indexgoods[n].content.map((i, idx) => {
                    return (
                      <Link to={'/detail/'+i.id} className='card' key={idx} >
                        <img src={$pre + i.img} alt="" />
                        <div className='right'>
                          <h3>商品名称:{i.goodsname}</h3>
                          <div>价格:{filterPrice(i.price)}</div>
                          <div>市场价格：{filterPrice(i.market_price)}</div>
                        </div>
                      </Link>
                    )
                  })}
                  </div> : <div>暂无数据</div>}
              </JumboTabs.Tab>

            )
          })
        }
      </JumboTabs>
    </div>
  )
}
